<template>
  <div>
    <p>数组变异中无法检测到的场景</p>
    <p>1.通过下标修改一整项</p>
    <p>2.当你修改数组的长度时</p>
      <button v-for="num in arr1" :key="num">{{num}}</button>
      <button @click="edit">edit</button>
      <hr>
      <el-button v-for="item in arr2" :key="'id'+item.id">{{item.name}}的id是{{item.id}}</el-button>
      <br>
      <el-button @click="edit2">edit</el-button>
      <hr>
      <p v-for="(val, key, index) in obj1" :key="key">
        {{index + 1}}. {{key}}: {{val}}
      </p>
      <el-button @click="editName">改名字</el-button>
      <el-button @click="addAge">加年龄</el-button>
      <el-button @click="delId">删id</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr1: [1,2,3,4,5],
      arr2: [
        {name: 'a', id: 1},
        {name: 'b', id: 2},
        {name: 'c', id: 3},
        {name: 'd', id: 4}
      ],
      obj1: {
        name: 'a', id: 1, job: 'teacher'
      }
    }
  },
  methods: {
    edit() {
      // 修改数组中的某一项
      // this.arr1[0] = 1.1; 错误的方法
      this.arr1.splice(0, 1, 1.1)
      console.log(this.arr1);
    },
    edit2() {
      // 修改数组中的某一项
      // this.arr2[0] = {name: 'aaa', id: 111}错误的方法
      this.arr2.splice(0, 1, {name: 'aaa', id: 111})
    },
    editName() {
      this.obj1.name = 'Tom'
    },
    addAge() {
      // console.log(this.obj1);
      // this.obj1.age = 18; 错误的方法
      this.$set(this.obj1, 'age', 18) // 这才是响应式的数据
    },
    delId() {
      console.log(this.obj1);
      // delete this.obj1.id;错误的方法
      this.$delete(this.obj1, 'id')
    }
  }
}
</script>

<style>

</style>